.course-info-popover {
  box-sizing: border-box;
  position: absolute;
  width: 800px;
  top: -300px;
  left: -400px;
  z-index: 2333;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  word-break: break-all;
  padding: 15px;
  height: 300px;
  display: flex;
  flex-direction: column;
  cursor: default;

  * {
    box-sizing: border-box;
  }

  .ci-popover-title {
    color: #303133;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 12px;
  }

  .ci-popover-content {
    flex: 1;
    overflow-y: auto;

    table {
      tr {
        td,
        th {
          text-align: center;
          vertical-align: middle;

          &:nth-child(7),
          &:nth-child(8),
          &:last-child {
            max-width: 100px;
          }
        }
      }
    }
  }
}

.sua-container-query-training-scheme,
.sua-container-compare-training-scheme {
  position: relative;

  .program-plan-wrapper {
    margin: 0 -12px;

    .row {
      margin: 0;
    }

    .info-container {
      .info-content {
        display: flex;
        flex-wrap: wrap;

        > div {
          margin-bottom: 20px;
        }

        table {
          height: 100%;
          margin-bottom: 0;

          tr {
            &:first-child {
              td {
                &:first-child,
                &:nth-child(2) {
                  border-top: 1px solid #eee;
                }
              }
            }

            &:last-child {
              td {
                &:first-child,
                &:nth-child(2) {
                  border-bottom: 1px solid #eee;
                }
              }
            }

            td {
              vertical-align: middle;

              &:first-child {
                max-width: 150px;
                min-width: 100px;
                font-weight: bold;
                color: #336199;
                background-color: #edf3f4;
                border-top: 1px solid #f7fbff;
                border-bottom: 1px solid #f7fbff;
              }

              &:nth-child(2) {
                border-top: 1px dotted #dcebf7;
                border-bottom: 1px dotted #dcebf7;
              }
            }
          }
        }
      }
    }

    .scheme-container {
      * {
        box-sizing: border-box;
      }

      .scheme-wrapper {
        .year-item {
          border-radius: 4px;
          border: 1px solid #ebeef5;
          background-color: #fff;
          color: #303133;
          transition: 0.3s;
          box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
          margin-bottom: 20px;
          // overflow: hidden;

          .year-item-title {
            height: 50px;
            line-height: 50px;
            padding: 0 15px;
            border-bottom: 1px solid #ebeef5;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
            font-size: 16px;
          }

          .year-item-content {
            padding: 15px;
            position: relative;

            .semester-item {
              display: flex;
              // overflow: hidden;

              .semester-item-title {
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                padding-right: 20px;
                margin: 5px;
                border-right: 1px solid #ebeef5;
              }

              .semester-item-content {
                flex: 1;
                display: flex;
                flex-wrap: wrap;

                .course-item-wrapper {
                  width: percentage(1/4);

                  .course-item {
                    position: relative;
                    display: flex;
                    border-radius: 4px;
                    border: 1px solid #ebeef5;
                    background-color: #fff;
                    color: #303133;
                    transition: 0.3s;
                    margin: 5px;
                    cursor: pointer;
                    // overflow: hidden;

                    &:hover {
                      background-color: #f5f7fa;
                    }

                    .course-item-info {
                      width: 100%;

                      .info-primary {
                        padding: 10px;

                        .course-name {
                          font-size: 16px;
                          line-height: 2;
                          font-weight: lighter;
                        }
                      }

                      .info-secondary {
                        padding: 10px;
                        padding-top: 0;

                        .info-tag {
                          display: inline-block;
                          height: 24px;
                          padding: 0 5px;
                          margin: 2px 0;
                          line-height: 24px;
                          font-size: 12px;
                          border-width: 1px;
                          border-style: solid;
                          border-radius: 4px;
                          box-sizing: border-box;
                          white-space: nowrap;

                          &.course-number {
                            background-color: #ecf4f8;
                            border-color: #d9e8f1;
                            color: #438eb9;
                          }

                          &.course-attribute {
                            background-color: #fdf6ec;
                            border-color: #faecd8;
                            color: #e6a23c;
                          }

                          &.course-property-name {
                            background-color: #fef0f0;
                            border-color: #fde2e2;
                            color: #f56c6c;

                            &.required {
                              background-color: #f0f9eb;
                              border-color: #e1f3d8;
                              color: #67c23a;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }

            .semester-divider {
              background-color: #dcdfe6;
              position: relative;
              display: block;
              height: 1px;
              width: 100%;
              margin: 24px 0;
            }
          }
        }
      }
    }

    .footer-container {
      .wrapper {
        display: flex;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        transition: 0.3s;
        box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);

        .footer-qrcode {
          margin: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .qrcode-image {
            height: 300px;
            width: 300px;
          }
        }

        .footer-explanation {
          flex: 1;
          padding: 10px;
          padding-left: 5px;
          padding-right: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .explanation-title {
            margin-top: 10px;
            margin-bottom: 15px;
          }

          .explanation-content {
            ol {
              margin-left: 1em;

              > li {
                list-style-type: decimal;
              }
            }

            p {
              margin-bottom: 0.5em;
              &.indent {
                text-indent: 2em;
              }
            }
          }
        }
      }
    }
  }
}

.sua-container-compare-training-scheme {
  $major-colors: (
    // 绿 MIDORI
      'same': #227d51,
    // 红 KURENAI
      '1': #cb1b45,
    // 露草 TSUYUKUSA
      '2': #2ea9df
  );

  .query-container {
    .query-major {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }

      @mixin query-major-name($type) {
        &#query-major-#{$type} {
          .profile-info-value:first-child {
            color: map-get($major-colors, $type);
            font-weight: bold;
            text-align: center;
          }
        }
      }

      @include query-major-name('1');
      @include query-major-name('2');
    }
  }

  .program-plan-wrapper {
    .info-tip {
      margin-bottom: 20px;
      font-weight: bold;

      @mixin info-tip($type) {
        span.item-value-#{$type} {
          color: map-get($major-colors, $type);
        }
      }

      @include info-tip('same');
      @include info-tip('1');
      @include info-tip('2');
    }

    .info-container {
      td {
        @mixin info-item($type) {
          .item-value-#{$type} {
            color: map-get($major-colors, $type);
          }
        }

        @include info-item('same');
        @include info-item('1');
        @include info-item('2');
      }
    }

    .scheme-container {
      .scheme-wrapper
        .year-item
        .year-item-content
        .semester-item
        .semester-item-content
        .course-item-wrapper {
        width: percentage(1/3);
      }

      @mixin course-item($type) {
        .year-item-title span.item-value-#{$type} {
          color: map-get($major-colors, $type) !important;
        }

        .course-item {
          &.item-value-#{$type} {
            border-color: map-get($major-colors, $type) !important;
          }

          .course-item-info .info-primary .course-name {
            font-weight: normal;

            span.item-value-#{$type} {
              color: map-get($major-colors, $type) !important;
            }
          }
        }
      }

      @include course-item('same');
      @include course-item('1');
      @include course-item('2');
    }
  }
}

.loading-container {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .lds-dual-ring {
    display: inline-block;
    width: 200px;
    height: 200px;

    &:after {
      content: ' ';
      display: block;
      width: 100%;
      height: 100%;
      margin: 1px;
      border-radius: 50%;
      border: 5px solid #336199;
      border-color: #336199 transparent #336199 transparent;
      animation: lds-dual-ring 1.2s linear infinite;
    }
  }

  .lds-title {
    font-size: 30px;
    color: #336199;
    padding-top: 40px;
    font-weight: lighter;
  }

  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}
